<template>
    <div class="register">
        <!--盒子-->
        <div class="box">
            <Form :model="user" :label-width="100" label-position="right">
                <!--手机号-->
                <FormItem>
                    <div slot="label" style="font-size: 16px;line-height: 20px">
                        手机号:
                    </div>
                    <Input type="text"
                           prefix="ios-phone-portrait"
                           v-model="user.iphoneNo"
                           maxlength="11"
                           show-word-limit
                           placeholder="请输入手机号"
                           size="large"
                           style="width: 300px"
                           clearable
                           @on-blur="checkIphoneNo"/>
                    <div class="tip">
                        {{iphoneNoTip}}
                    </div>
                </FormItem>

                <!--设置密码-->
                <FormItem style="margin-top: -10px">
                    <div slot="label" style="font-size: 16px;line-height: 20px">
                        设置密码:
                    </div>
                    <Tooltip placement="right" theme="light">
                        <div slot="content">
                            <p style="font-size: 14px">6~14个字符，区分大小写</p>
                            <p style="font-size: 14px">字母，数字，标点符号(除空格)</p>
                        </div>
                        <Input type="password"
                               prefix="ios-finger-print"
                               v-model="user.pwd"
                               placeholder="请输入密码"
                               size="large"
                               password
                               style="width: 300px;"
                               clearable
                               @on-blur="checkPwd"/>
                    </Tooltip>
                    <div class="tip">
                        {{pwdTip}}
                    </div>
                </FormItem>

                <!--确认密码-->
                <FormItem style="margin-top: -10px">
                    <div slot="label" style="font-size: 16px;line-height: 20px">
                        确认密码:
                    </div>
                    <Tooltip placement="right" theme="light">
                        <div slot="content">
                            <p style="font-size: 14px">6~14个字符，区分大小写</p>
                            <p style="font-size: 14px">字母，数字，标点符号(除空格)</p>
                        </div>
                        <Input type="password"
                               prefix="ios-finger-print"
                               v-model="user.confirmPwd"
                               placeholder="请确认密码"
                               size="large"
                               password
                               style="width: 300px"
                               clearable
                               @on-blur="checkConfirmPwd"
                               @on-enter="enter"/>
                    </Tooltip>
                    <div class="tip">
                        {{confirmPwdTip}}
                    </div>
                </FormItem>

                <FormItem>
                    <Button type="success"
                            @click="reg"
                            style="width: 300px;margin-top: -10px">
                        注册
                    </Button>
                </FormItem>

            </Form>
        </div>
    </div>
</template>

<script>
    import {checkIsIphoneNo, checkStrIsNull} from "@/tools/check";
    import * as Base64 from "js-base64";

    export default {
        name: "",
        components: {},
        data() {
            return {
                user: {
                    //手机号
                    iphoneNo: "",
                    //密码
                    pwd: "",
                    //确认密码
                    confirmPwd: "",
                },
                //提示
                iphoneNoTip: "",
                pwdTip: "",
                confirmPwdTip: "",
            }
        },
        methods: {
            checkIphoneNo: function () {
                this.iphoneNoTip = ""
                let b = checkStrIsNull(this.user.iphoneNo);
                if (b) {
                    this.iphoneNoTip = "手机号不能为空"
                } else {
                    let b1 = checkIsIphoneNo(this.user.iphoneNo);
                    if (!b1) {
                        this.iphoneNoTip = "手机号格式非法"
                    }
                }
            },
            checkPwd: function () {
                this.pwdTip = ""
                let pwd = this.user.pwd.trim();
                let b1 = checkStrIsNull(pwd);
                if (b1) {
                    this.pwdTip = "密码不能为空"
                } else {
                    if (pwd.length < 6 || pwd.length > 14) {
                        this.pwdTip = "密码不符合规范  请设置6-14个字符的密码"
                    }
                }
            },
            checkConfirmPwd: function () {
                this.confirmPwdTip = ""
                let confirmPwd = this.user.confirmPwd.trim();
                let b2 = checkStrIsNull(confirmPwd);
                if (b2) {
                    this.confirmPwdTip = "确认密码不能为空"
                } else {
                    if (confirmPwd.length < 6 || confirmPwd.length > 14) {
                        this.confirmPwdTip = "确认密码不符合规范  请设置6-14个字符的确认密码"
                    }
                }
            },
            //按下enter
            enter: function () {
                this.reg()
            },
            //注册前校验
            check: function () {
                let flag = true
                //手机号
                let b = checkStrIsNull(this.user.iphoneNo);
                if (b) {
                    this.iphoneNoTip = "手机号不能为空"
                    flag = false
                } else {
                    let b1 = checkIsIphoneNo(this.user.iphoneNo);
                    if (!b1) {
                        this.iphoneNoTip = "手机号格式非法"
                        flag = false
                    }
                }
                let pwd = this.user.pwd.trim();
                let confirmPwd = this.user.confirmPwd.trim();
                //密码和确认密码
                if (pwd != confirmPwd) {
                    this.pwdTip = "两次输入的密码不一致"
                    this.confirmPwdTip = "两次输入的密码不一致"
                    flag = false
                }
                //密码
                let b1 = checkStrIsNull(pwd);
                if (b1) {
                    this.pwdTip = "密码不能为空"
                    flag = false
                } else {
                    if (pwd.length < 6 || pwd.length > 14) {
                        this.pwdTip = "密码不符合规范  请设置6-14个字符的密码"
                        flag = false
                    }
                }
                //确认密码
                let b2 = checkStrIsNull(confirmPwd);
                if (b2) {
                    this.confirmPwdTip = "确认密码不能为空"
                    flag = false
                } else {
                    if (confirmPwd.length < 6 || confirmPwd.length > 14) {
                        this.confirmPwdTip = "确认密码不符合规范  请设置6-14个字符的确认密码"
                        flag = false
                    }
                }
                return flag
            },
            //注册
            reg: function () {
                this.iphoneNoTip = ""
                this.pwdTip = ""
                this.confirmPwdTip = ""
                let b = this.check();
                if (!b) {
                    return
                }

                let data = {
                    iphoneNo: this.user.iphoneNo,
                    po: Base64.encode(this.user.pwd),
                    pc: this.Md5(this.user.pwd)
                }
                this.axios.post(`/login/register/user`, data)
                    .then((data) => {
                        if (data.code == 20001) {
                            this.iphoneNoTip = "该手机号已经注册"
                            this.$Message.error({
                                background: true,
                                duration: 2,
                                content: '该手机号已经注册'
                            });
                        }
                        if (data.code == 200) {
                            this.$Message.success({
                                background: true,
                                closable: true,
                                duration: 2,
                                content: '注册成功'
                            });
                            this.$router.push("/login");
                        }
                    })
            }
        },
        mounted() {
        }
    }
</script>

<style scoped>

    .register {
        width: 1200px;
        min-height: calc(100vh - 70px);
        margin: 0 auto;
    }

    .register .box {
        height: calc(100vh - 70px);
        padding: 100px 0px 0px 350px;
    }

    .tip {
        height: 24px;
        font-size: 14px;
        line-height: 24px;
        color: #FF0000;
    }
</style>